<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist删除和添加</title>
    <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
       <input type="text" v-model="inputValue">
       <button @click="handleClick">提交1</button>
       <ul>
           <todo-item
                   v-for="(item,index) in list"
                   :key="index"
                   :content1="item"
                   :index="index"
                   @delete1="handleDel"
           ></todo-item>
       </ul>
   </div>
</body>
<script>
    //局部组件(可以添加methods)
    var todoItem={
        props:["content1",'index'],
        template:"<li @click='handleclick2'>{{content1}},{{index}}</li>",
        methods:{
            handleclick2:function () {//子组件删除
                this.$emit('delete1',this.index);
            }
        }
    };
    var componentA ={
        template:"<li></li>"
    };
    new Vue({
        el:"#root",
        components:{
            "component-a":componentA,
            "todo-item":todoItem
        },
        data:{
            inputValue:"",
            list:[],
        },
        methods:{
            handleClick:function () {
                this.list.push(this.inputValue);
                this.inputValue=""
            },
            handleDel:function (index) {
               this.list.splice(index,1);
            }
        }
    })
</script>
</html>